<template>
  <div>
    <!-- 阿里云视频播放器样式 -->
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.7/skins/default/aliplayer-min.css" />
    <!-- 阿里云视频播放器脚本 -->
    <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.7/aliplayer-min.js"></script>
    <!-- 定义播放器dom -->
    <div id="J_prismPlayer" class="prism-player" />
  </div>
</template>

<script>
import vodApi from '@/api/vod.js'
export default{
  layout: 'video',  //应用video布局
  asyncData({params, error}){
    return vodApi.getPlayAuth(params.vid)
      .then(res => {
        return {
          playAuth: res.data.data.playAuth,
          vid: params.vid
        }
      })
  },
  //页面渲染之后执行
  mounted(){
    new Aliplayer({
        id: 'J_prismPlayer',
        autoplay: false,
        //根据视频凭证进行播放配置
        cover: 'http://guli.shop/photo/banner/1525939573202.jpg',
        vid : this.vid, //视频id
        playauth : this.playAuth, //视频凭证
        encryptType:1, //当播放私有加密流时需要设置。
        width: '100%',
        height: '500px'
    	},function(player){
    	console.log('播放器创建好了。')
     });
  }
}
</script>

<style>
</style>
